<template>
  <div class="detail" >
    <!-- 详情页 -->
    <el-container direction='vertical'>
      <Header></Header>
      <el-container>
        <!-- 左侧导航菜单 -->
        <el-aside :style="getCollapseState == false ? 'width:220px' : 'width:70px'">
          <Aside></Aside>
        </el-aside>
        <el-main>
          <!-- tabs导航菜单部分 -->
          <div class="content-tabs">
            <AsideTabs></AsideTabs>
          </div>
          <!-- 显示子页面 添加动画显示-->
          <div class="bg">
            <transition name="compAnimate" appear>
              <keep-alive>
                <router-view />
              </keep-alive>
            </transition>
          </div>
        </el-main>
        <!-- 可以自行是否添加底部栏 -->
        <!-- <Footer /> -->
      </el-container>
    </el-container>
  </div>
</template>

<script>

import drawMixin from '../untils/drawmin';
// 导入布局组件
import Header from '../layout/rightMain/Header'
import Aside from '../layout/leftAside/Aside'
import AsideTabs from '../layout/rightMain/AsideTabs'
// import Footer from '../layout/rightMain/Footer'
// 引入vuex的数据
import { mapGetters } from 'vuex'

export default {
   mixins: [ drawMixin ],
  components: {
    Header,
    Aside,
    AsideTabs
    // Footer
  },
  mounted() {
     
  },
  computed: {
    ...mapGetters({
      getCollapseState: 'layout/CollapseState',
      getNavs: 'layout/Navs',
      getAsideTitle: 'layout/AsideTitle',
      getCount: 'layout/Count'
    })
  },
  watch: {
    // 监听路由的变化
    $route: function (to) {
      this.createTabs(to.path)
    }
  },
  methods: {
    // 动态添加标题标签方法 path：当前点击左侧导航的path
    // 1.首先会处理welcome（首页）页，welcome页已在vuex中初始化了，所以，当用户再次点击时，直接定位到首页
    // 2.如果不是首页，则会通过当前导航的path去和左侧导航数据比对，如果path相等存入vuex asideTitle
    // 3.如果vuex的asideTitle已有数据，再次点击时，只定位，不新增
    // 注意：vuex中的count（标题标签的增值变量，可以保证每次添加的标题标签不重复，作用于后面的标题标签定位）
    // count每次进来都需要自增，保证唯一，默认为0
    createTabs(path) {
      if (path !== '/areaDetail/data') {
        const asideItem = {}
        // 得到当前点击的左侧导航的名字，存入vuex的layout/asideTitle中
        const nav = this.getNavs.nav
        for (let i = 0; i < nav.length; i++) {
          const parentTitle = nav[i].authName
          // 判断是否存在子导航，如果存在则取子导航的名字，如果没有，则取当前的导航名字
          if (nav[i].child) {
            for (let j = 0; j < nav[i].child.length; j++) {
              if (nav[i].child[j].path === path) {
                const childTitle = nav[i].child[j].authName
                // 判断vuex中是否已经存在当前标题，如果存在则不处理，否则添加入vuex中
                const result = this.getAsideTitle.filter(item => {
                  return item.authName === nav[i].child[j].authName
                })
                if (result.length === 0) {
                  // 添加标题标签
                  let count = this.getCount
                  count++
                  this.$store.commit('layout/setCount', count)
                  asideItem.authName = nav[i].child[j].authName
                  asideItem.path = nav[i].child[j].path
                  asideItem.activeIndex = count
                  this.$store.commit('layout/setAside', asideItem)
                  this.$store.commit('layout/setActiveIndex', count)
                  this.setCrumbs(parentTitle, childTitle)
                  return
                } else {
                  // 定位到当前的标题标签
                  if (nav[i].child[j].path === path) {
                    const result = this.getAsideTitle.filter(item => {
                      return item.authName === nav[i].child[j].authName
                    })
                    this.$store.commit('layout/setActiveIndex', result[0].activeIndex)
                    this.setCrumbs(parentTitle, childTitle)
                  }
                }
              }
            }
          } else {
            if (nav[i].path === path) {
              // 判断vuex中是否已经存在当前标题，如果存在则不处理，否则添加入vuex中
              const result = this.getAsideTitle.filter(item => {
                return item.authName === nav[i].authName
              })
              const childTitle = nav[i].authName
              // 添加标题标签
              if (result.length === 0) {
                let count = this.getCount
                count++
                this.$store.commit('layout/setCount', count)
                asideItem.authName = nav[i].authName
                asideItem.path = nav[i].path
                asideItem.activeIndex = count
                this.$store.commit('layout/setAside', asideItem)
                this.$store.commit('layout/setActiveIndex', count)
                this.setCrumbs(childTitle, '')
                return
              } else {
                // 定位到当前的标题标签
                if (nav[i].path === path) {
                  const result = this.getAsideTitle.filter(item => {
                    return item.authName === nav[i].authName
                  })
                  this.$store.commit('layout/setActiveIndex', result[0].activeIndex)
                  this.setCrumbs(childTitle, '')
                }
              }
            }
          }
        }
      } else {
        this.$store.commit('layout/setActiveIndex', 0)
        this.setCrumbs('数据统计', '数据统计')
      }
    },
    // 动态设置面包屑
    setCrumbs(pt, ct) {
      const crumbs = []
      crumbs.push(pt, ct)
      this.$store.commit('layout/setCrumbs', crumbs)
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-container {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    .el-main {
      border-top: 1px solid #e4e7e8;
      box-sizing: border-box;
      padding: 0;
      .content-tabs {
        position: fixed;
        width: 100%;
        height: 50px;
        // margin-bottom: 15px;
        // padding: 0 20px;
        line-height: 50px;
        box-sizing: border-box;
        background-color: #fafafa;
        border-bottom: 2px solid red;
      }
    }
  }
}
// 右侧背景
.bg {
  margin-top: 50px;
  padding: 10px;
  background-color: #fff;
  height: calc(100vh - 100px);
  overflow: auto;

}
/*组件过渡动画*/
.compAnimate-enter {
  opacity: 0;
  transform: translateX(60px);
}

.compAnimate-leave-to {
  opacity: 0;
}

.compAnimate-enter-active {
  transition: all 0.8s ease-in-out;
}
.compAnimate-leave-active {
  transition: all 0.2s ease;
}
</style>
